<template>
    <div class="attr">
        <CommonAttr></CommonAttr>
        <el-form>
            <el-form-item label="标题">
                <el-input
                    v-model="option.series[0].data[0].name"
                    placeholder="请输入标题"
                >
                </el-input>
            </el-form-item>
            <el-form-item label="表盘颜色">
                <el-color-picker   v-model="option.series[0].axisLine.lineStyle.color[0][1]" show-alpha></el-color-picker>
            </el-form-item>     
            <el-form-item label="指针颜色">
                <el-color-picker  v-model="option.series[0].pointer.itemStyle.color" show-alpha></el-color-picker>
            </el-form-item>                 
            <el-form-item label="值">
                <el-input
                    v-model="option.series[0].data[0].value"
                    placeholder=""
                >
                </el-input>
            </el-form-item>  
            <el-form-item label="最小值">
                <el-input
                    v-model="option.series[0].min"
                >
                </el-input>
            </el-form-item>   
            <el-form-item label="最大值">
                <el-input
                    v-model="option.series[0].max"
                >
                </el-input>
            </el-form-item>                           
            <el-form-item label="小数显示位数">
                <el-input
                    v-model="curComponent.style.digitNum"
                >
                </el-input>
            </el-form-item>     
            <el-form-item label="动画表盘">
                <el-switch
                    v-model="option.series[0].progress.show"
                >
                </el-switch>
                <el-color-picker  v-if="option.series[0].progress.show" v-model="option.series[0].progress.itemStyle.color" show-alpha></el-color-picker>
            </el-form-item>  
            <el-form-item label="值显示颜色" v-if="option.series[0].progress.show" >
                <el-color-picker   v-model="option.series[0].progress.itemStyle.color" show-alpha></el-color-picker>
            </el-form-item>                          
            
        </el-form>
    </div>
</template>

<script>

import CommonAttr from '@/custom-component/common/CommonAttr.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ArrowDown } from '@element-plus/icons-vue'

export default {
    components: { CommonAttr, ArrowDown },
    data() {
        return {
            charts: [
                {
                    title: 'bar',
                    name: '柱状图',
                },
                {
                    title: 'scatter',
                    name: '散点图',
                },
                {
                    title: 'line',
                    name: '折线图',
                },
            ],
        }
    },
    computed: {
        curComponent() {
            return this.$store.state.curComponent
        },
        option() {
            return this.$store.state.curComponent.propValue.option
        },
    },

    methods: {


    },
}
</script>

<style>
.attr {
    margin: 13px;
}
</style>
